<template>
  <div class="top_toolbar">
    <a-row class="top-title">
      <a-col :span="9">
        <div class="idmcore_topbar_left_box flex100">
          <TopLeftTitle
            height="50"
            :pageId="PageSettingData.id"
            :title="PageSettingData.pageBaseInfo.title"
            :version="PageSettingData.pageBaseInfo.version"
            :changeHandle="versionChangeHandle"
          ></TopLeftTitle>
        </div>
      </a-col>
      <a-col :span="6">
        <DragAreaSizeDropList
          height="50"
          :adaptScreen="adaptScreen"
          :fullScreenStatus="data.fullScreenStatus"
          :changeHandle="dragAreaSizeChangeHandle"
        ></DragAreaSizeDropList>
      </a-col>
      <a-col :span="9" style="justify-content:flex-end">
        <TopRightAction
          height="50"
          :changeHandle="menuActionChangeHandle"
        ></TopRightAction>
      </a-col>
    </a-row>
    <!-- <div class="idmcore_top_toolbar_box">
      <HoverModeToolBar></HoverModeToolBar>
    </div> -->
  </div>
</template>

<script setup lang="ts">
// 悬浮模式的工具栏
// import HoverModeToolBar from './develop/HoverModeToolBar.vue'
// 顶部左侧标题组件
import TopLeftTitle from './develop/TopLeftTitle.vue'
// 顶部中间拖拽区域大小控制
import DragAreaSizeDropList from './develop/DragAreaSizeDropList.vue'
// 顶部右侧功能菜单组件
import TopRightAction from './develop/TopRightAction.vue'
import { reactive } from 'vue';
import HJP from '@/utils/install';

// 页面的全部设置数据
const PageSettingData = reactive({
  // 当前页面的ID，主数据ID
  id: "PAGE_AKYJNPMVQAYN1JX2X3PT6YG1GH0L1YFEREQLKK9",
  // 当前页面的基础配置信息
  pageBaseInfo: {
    title: HJP.url.queryString("defaultPageTitle"),
    version: '1.0.0' // 当前页面版本
  }
})

// 设置操作区域宽高
const adaptScreen = reactive({
  fullWidth: HJP.getClientWH().width,
  fullHeight: HJP.getClientWH().height,
  minWidth: HJP.getClientWH().width - 660,
  minHeight: HJP.getClientWH().height - 120 - 300
})

/**
 * 菜单功能动作点击事件
 */
function menuActionChangeHandle(argsObject: object) {
  console.log(argsObject, '回调')
}

const data = reactive({
  fullScreenStatus: false
})

/**
 * @Desc 切换改变、版本事件
 */
function versionChangeHandle (argsObject: any) {
  console.log("标题改变、版本切换事件", argsObject);
}

/**
 * @Desc 拖拽区域大小改变事件
 */
function dragAreaSizeChangeHandle(argsObject, isOutCheck) {
  console.log(argsObject, isOutCheck, 333)
}

</script>

<style lang="scss" scoped>
.top_toolbar{
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,.08);
  .top-title{
    height: 100%;
    .ant-col{
      display: flex;
      align-items: center;
    }
  }
}
</style>
